<template>
    <a-modal
        :bodyStyle="{maxHeight: maxHeight+'px', overflow: 'auto' }"
        :destroyOnClose="true"
        :title="title"
        :width="width"
        :visible="visible"
        :confirmLoading="confirmLoading"
        :maskClosable="maskClosable"
        @ok="ok"
        @cancel="cancel"
        cancelText="关闭"
        :ok-button-props="{ props: { shape:'round'} }"
        :cancel-button-props="{ props: { shape:'round'} }">
        
        <a-spin :spinning="confirmLoading" v-if="isShowColumn">
            <center>
                 <a-form :labelCol="labelCol" :wrapperCol="wrapperCol" >
                     <a-row>
                         <a-checkbox-group @change="onChange" :default-value="keyIdList">
                            <a-col :span="6" v-for="(field,index) in fieldList" :key="index">
                                <a-form-item :label="field.fieldTitle">
                                    <a-checkbox :value="field.keyId" ></a-checkbox>
                                </a-form-item>
                            </a-col>
                        </a-checkbox-group>
                    </a-row>
                 </a-form>
            </center>
        </a-spin>
    </a-modal>
</template>
<script>
import request from '@/utils/request'
export default {
    name:'LExcelDownload',
    props:{
        title:{
            type:String,
            default:'数据导出'
        },
        templateId:{
            type:String,
            required:true
        },
        templateName:{
            type:String,
            required:true
        },
        maxHeight:{
            type:Number,
            default:800
        },
        width:{
            type:Number,
            default:600
        },
        
        maskClosable:{
            type:Boolean,
            default:true
        },
        labelCol:{
            type:Object,
            default:function(){
                return {sm: { span: 20 }}
            }
        },
        wrapperCol:{
            type:Object,
            default:function(){
                return {sm: { span: 4 }}
            }
        },
        downTable:Object,
        isShowColumn:{
            type:Boolean,
            default:true
        },
    },
    data() {
        return {
            visible:false,
            confirmLoading: false,
            fieldList:[],
            keyIdList:[],
            optionList:[],
            checkedValues:[],
            
        }
    },
     watch:{
        visible () {
            if (this.visible) {
                this.queryTemplateDetail();
            }else{
                this.fieldList=[];
                this.keyIdList=[];
                this.optionList=[];
                this.checkedValues=[];
            }
        }
     },
    created(){
        
    },
    methods:{
        queryTemplateDetail(){
            let dataCenter={
                pageNo:1,
                pageSize:10,
                orderColumns:[{field:'fieldOrder',val:"asc"}],
                queryForm:[{field:'templateId',val:this.templateId}],
            }
            this.confirmLoading = true;
            request({url:'/SysImportTemplateDetailController/list',method: 'post',data: dataCenter}).then((res)=>{
                    if(res.success){   
                        this.fieldList = res.result
                        if(this.fieldList.length>0){
                            this.fieldList.forEach((v,l,k)=>{
                                this.optionList.push({label:v.fieldTitle,value:v.keyId})
                                this.keyIdList.push(v.keyId)
                                this.checkedValues.push(v.keyId);
                            })
                        }
                    }else{
                        this.$message.warning(res.message);
                    }
                }).finally(() => {
                    this.confirmLoading = false;
                   
                })
        },
        onChange(checkedValues) {
            this.checkedValues=checkedValues;
        },
        show(){
            this.visible=true;
        },
       
        ok(){
            let that = this
            that.confirmLoading = true;
            if(that.checkedValues.length==0){
                this.$message.warning("请选择要导出的列");
                return false
            }
            let checkedFields = that.fieldList.filter(function(item) { 
                return that.checkedValues.indexOf(item.keyId)>-1?true:false
            });

            const formData = new FormData();
            formData.append('checkedFields', JSON.stringify(checkedFields));
            formData.append('templateId',that.templateId);
            if(this.downTable){
                formData.append('dataCenter',JSON.stringify(this.downTable.getDataCenter()));
            }
            request({
                url: '/excel/ExportExcelControl/excelExport',
                method: 'post',
                data:formData,
                responseType: "blob"
            }).then((res)=>{
                const link = document.createElement("a");
                let blob = new Blob([res], { type: "multipary/form-data" });
                link.style.display = "none";
                link.href = URL.createObjectURL(blob);
                link.setAttribute("download",this.templateName+'.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }).finally(() => {
                this.confirmLoading = false;
            })

            this.$emit('handleOk');
        },
        cancel(){
            this.visible=false
            this.$emit('handleCancel');
        },
    }
}
</script>